import './index.css'

import { Button, Upload } from 'antd'

import { UploadOutlined } from '@ant-design/icons'

export default function UploadImages() {
  const [list, setList] = useState([])
  return (
    <div>
      <Upload
        action="http://localhost:3000/upload/uploads"
        listType="picture"
        maxCount={10}
        multiple
        showUploadList={{
          showRemoveIcon: true
        }}
        onChange={(info) => {
          if (info.file.status === 'done') {
            // 上传成功
            const newList = [...list]
            newList.push(info.file.response.files[0].split('backEnd')[1])
            setList(newList)
          } else if (info.file.status === 'removed') {
            // 删除
            const newList = [...list]
            const url = info.file.response.files[0]
            const index = newList.findIndex((item) => item === url)
            newList.splice(index, 1)
            setList(newList)
          } else if (info.file.status === 'error') {
            // 上传失败
            console.log('file upload error')
          }
        }}
      >
        <Button icon={<UploadOutlined />}>Upload image</Button>
      </Upload>
    </div>
  )
}
